<template>
    <div class="class-data">
		<nav-header>
			<template slot="menuBefore">
				<li v-if="graduation === 'graduation'"><router-link to="/user/class/class-graduation" tag="a">已毕业班级</router-link></li>
                <li v-else><router-link to="/user/class/class-members" tag="a">班级列表</router-link></li>
                <li class="gap">&gt;</li>
			</template>
				<li v-text="classNxt" style="color: #999;"></li>				
		</nav-header>

        <div class="zh-h5-tabs">
            <el-button type="default" @click="toLink('/user/class/class-management')">成员</el-button>
            <el-button type="default" @click="toLink('/user/class/class-post', true)">岗位</el-button>
            <el-button type="default" @click="toLink('/user/class/class-timetable')">课程表</el-button>
            <el-button type="primary">资料</el-button>
        </div>

        <div class="zh-tabs">
             <div class="zh-table">
                 <div class="zh-table-open clear">
                    <div class="zh-open-left fl tab-btns">
                        <div class="open-width" style="width: 200px">
							<el-input v-model="listParam.keyword" placeholder="资料名称/上传人"></el-input>
						</div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                    <div class="zh-open-right fr">
                        <el-button type="danger" @click="delShow()">批量删除</el-button>
                    </div>
                </div>
                <div class="zh-table-contents">
                    <el-table
                        :data="classData"
                        border
                        max-height="600"
                        @selection-change="toggleSelection"
                        style="width: 100%">
                        <el-table-column
                            type="selection"
                            width="55"
                            fixed>
                        </el-table-column>
                        <el-table-column
                            label="资料名称"
                            prop="name"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="u_name"
                            label="上传人"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="create_time"
                            label="上传时间"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            width="180">
                            <template slot-scope="scope">
                                <el-button type="text" @click="viewResource(scope.row)">预览</el-button>
                                <el-button type="text" @click="download(scope.row.id)">下载</el-button>
                                <el-button type="text" class="delete-button" @click="delShow(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="table-pagination" v-show="total_number > 10"> 
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="tipFlag"
			:close-on-click-modal="false" 
			:close-on-press-escape="false"
            width="30%"
            center>
            <span>{{delTips}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tipFlag = false">取 消</el-button>
                <el-button type="primary" @click="del">确 定</el-button>
            </span>
        </el-dialog>

        <transition name="el-fade-in-linear">
			<div class="video-preview" :class="{activeLive: isActive}">
				<div class="maskingBox"
					v-loading="viewLoading.status"
					:element-loading-text="viewLoading.txt">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="closeVideoView"></i>
					</div>
					<div class="masking_c">
						<nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam"></nativeVideo>
					</div>
				</div>
			</div>
		</transition>

        <transition name="el-fade-in-linear" lock-scroll="false">
			<div class="document-preview" :class="{activeLive: isPDFActive}">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="closePdfView"></i>
					</div>

					<div class="masking_c">
                    <div>
                        <div class="pdf-view">
                            <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                            <!-- <div 
                                v-if="viwPdfParam.loadedRatio > 0 && viwPdfParam.loadedRatio < 1" 
                                style="background-color: green; color: white; text-align: center" 
                                :style="{ width: viwPdfParam.loadedRatio * 100 + '%' }">
                                {{ Math.floor(viwPdfParam.loadedRatio * 100) }}%
                            </div>
                            <pdf ref="pdf" 
                                :src="viwPdfParam.src" 
                                :page="viwPdfParam.page"   
                                @error="error" 
                                @progress="viwPdfParam.loadedRatio = $event" 
                                @num-pages="viwPdfParam.numPages = $event" 
                                @link-clicked="viwPdfParam.page = $event">
                            </pdf> -->
                        </div>

                        <!-- <el-pagination
                            @current-change="pdfPageChange"
                            :current-page="viwPdfParam.page"
                            :page-size="1"
                            layout="total,  prev, pager, next, jumper"
                            :total="viwPdfParam.numPages">
                        </el-pagination> -->
                    </div>
				</div>
				</div>
			</div>
		</transition>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

        <el-dialog
			title="音频预览"
            class="audio-preview"
			:visible.sync="voiceVisible"
            :before-close="closeAudio"
			:close-on-click-modal="false">
			<div>
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload">
				    Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
    </div>
</template>
<script>
import nativeVideo from '../../public/nativeVideo';

export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
			rowLen: 0,
            classData: [],
            multipleSelection: [],
            tipFlag: false,
            delTips: '',
            delParams: {},
            delAlls: [],
            listParam: {
                keyword: '',
                page: 1,
                size: 10,
                class_id: this.$route.params.id,
            },
            total_number: 0,
            isActive: true,
            isPDFActive: true,
            viwPdfParam:{
                src:'',
                loadedRatio: 0,
                page: 1,
                numPages: 0,
                rotate: 0,
            },
            imgVisible: false,
            imgViewUrl:'',
            voiceVisible:false,
            voiceViewUrl:'',
            viewLoading:{
                status:false,
                txt:'加载数据...'
            },
            showVideoPlayer:false,
            playParam:{play_url:'',},
            classNxt: '',
            graduation: '',
        }
    },
    created() {
        this.getList()
        this.getClassName();
    },
    mounted() {
        if (!is_empty(this.$route.query.class) && this.$route.query.class === 'graduation') {
            this.graduation = 'graduation';
        }  else {
            this.graduation = '';
        }
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 关闭音频播放
         */
        closeAudio() {
            this.voiceVisible = false;
            document.getElementById("voicepoauy").pause();
        },
        /**
         * 获取班级名称
         */
        getClassName() {
            let success = ( data => {
                this.classNxt =  data.data[0] ?  data.data[0].rename : '';
            });
            let params = {
                id: this.$route.params.id
            }

            if (this.$route.query.class === 'graduation') {
                params.status = 3;
            }

            this.$ajax.get('api/org/org', {params: params, func:{success: success}})
        },
        /**
         * 
         */
        getList() {
            let params = this.listParam;
            const success = (res) => {
                this.classData = res.data.data;
                this.total_number = res.data.data_sum;
            }
            this.$ajax.get('api/user/class_resource', {params: params,func: {success: success}})
		},
		search() {
			this.listParam.page = 1;
			this.getList();
		},
		reset() {
			this.listParam = {
				keyword: '',
                page: 1,
                size: 10,
                class_id: this.$route.params.id,
			}
			this.getList();
		},
        delShow(row) {
            if(row) {
                // this.tipFlag = true;
				this.delTips = `确定删除 ${row.name} 吗？`;
				this.rowLen = 1;

                Object.assign(this.delParams, {
                    class_id: this.$route.params.id,
                    resource_id: row.id
                })
            } else {
                if(this.delAlls.length <= 0) {
                    this.$message.warning('请选择要删除的资料');
                    return
                }
                // this.tipFlag = true;
				this.delTips = `确定删除吗？`;
				this.rowLen = this.delAlls.length;

                Object.assign(this.delParams, {
                    class_id: this.$route.params.id,
                    resource_id: this.delAlls
                })
			}
			
			let yes = ( data => {
				this.del();
			})
			let cancel = ( data => {});

			this.e_confirm({yes: yes, cancel: cancel, txt: this.delTips});
        },
        del() {
            const success = (res => {
				// this.tipFlag = false;
				this.$message.success(res.msg);

				if (this.classData.length - this.rowLen === 0) {
					if (this.listParam.page > 1) {
						this.listParam.page-- ;
					} else {
						this.listParam.page = 1;
					}
				}

                this.getList();
            })
            this.$ajax.delete('api/user/class_resource',{
                params: this.delParams,
                func: {success: success}
            })
        },
        download(id) {
            let url = this.BASE_URL + '/index/resource/resourcedownload?type=1&id=' + id;
            window.open( url ) ;
        },
        toggleSelection(rows) {
            let arr = [];
            if (rows.length > 0) {
                rows.forEach(row => {
                    arr.push(row.id);
                });
            } else {
                arr = [];
            }
            this.delAlls = arr;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        toLink(link, flag) {
            if (flag && this.graduation === 'graduation') {
                this.$router.push('/user/class/class-post-setting/' + this.$route.params.id + '?class=graduation');
            } else {
                this.$router.push(link + '/' + this.$route.params.id + (this.graduation ? '?class=' + this.graduation : ''));
            }
        },
            handleSizeChange(val) {
                this.listParam.page = 1;
                this.listParam.size = val;
                this.getList()
            },
		    handleCurrentChange(val) {
		    	this.listParam.page = val;
		    	this.getList();
            },
            /**
             * 切换 PDF 分页
             */
            pdfPageChange(val){
				this.viwPdfParam.page = val;
			},
            error: function(err) {
				//this.$message.error('读取文件失败');
	        },
            //资源预览转发,拷贝teaching-resources
			viewResource( obj ){
                this.viewLoading.status = true;

                switch(parseInt(obj.file_type)) {
                    case 1:
                        this.isPDFActive = false;
                        break;
                    case 3:
                        this.imgVisible = true;
                        break;
                    case 5:
                        this.voiceVisible = true;
                        break;
                    case 6:
                        this.isActive = false;
                        break;
                    default:
                        this.$message.warning("不支持预览的资源类型")
					    return false;
                }
                
				let success = ( data => {
					let result = deep_clone(data.data);
					                    
                    switch(parseInt(result.file_type)) {
                        case 1:
                            this.pdfView(result.path);
                            break;
                        case 3:
                            this.imgView(result.path);
                            break;
                        case 5:
                            this.voiceView(result.path);
                            break;
                        case 6:
                            this.videoView(result.path);
                            break;
                        default:
                            this.$message.warning("不支持预览的资源类型")
                    }
                })
                
				let fail = (data => {
					this.viewLoading.status = false;
					this.$message.error(data.msg);
                })

				this.$ajax.get('api/resource/view_info',{params: {id:obj.id,is_video:obj.is_video},func:{success:success,fail:fail}})
            },
            /**
             * 弹出音频播放框
             */
            voiceView(url){
	        	this.voiceViewUrl = url;
                document.getElementById("voicepoauy").load();
            },
            /**
             * 查看图片
             * @param {Object} obj 记录信息
             */
            imgView(url) {
                this.imgViewUrl = url;
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [url];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
			/**
             * pdf预览
             */
			pdfView(url){
                this.viwPdfParam.page = 1;
				this.viwPdfParam.src = (url);
				// this.viwPdfParam.src = pdf.createLoadingTask(url);
            },
            /**
             * 关闭 pdf 预览
             */
			closePdfView(){
				this.isPDFActive = true;
			},
			/**
             * 关闭视频预览
             */
			closeVideoView(){
				this.showVideoPlayer = false;
				this.isActive = true;
			},
			/**
             * 视频预览
             */
			videoView(url){
				this.showVideoPlayer = true;
                this.playParam.play_url = url;
			},
    },
    components: {
        nativeVideo,
        // pdf
    }
}
</script>
<style lang="scss">
    .class-data {
        .zh-h5-tabs {
            padding-bottom: 20px;
        }

        .activeLive{
			opacity: 0;
			visibility: hidden;
		}

        .el-dialog__wrapper{
			.el-dialog__body {
                text-align: center;
				padding: 0;
            }
		}

        .masking_h {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            height: 40px;
            background: #348EFC;

            >span,
            >i {
                font-size: 16px;
                color: #fff;
            }

            >i{
                cursor: pointer;
            }
        }

        .video-preview {
            display: flex;
            justify-content: center;
            align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0, 0, 0, 0.5);
			z-index: 6;

            .maskingBox {
                width: 70vw;
                height: 70vh;
                max-width: 1000px;
                max-height: 600px;
				background: #fff;
			}

            .masking_c {
                height: calc(100% - 40px);
                box-sizing: border-box;

                >div >div {
                    height: 600px;
                }
            }
        }

        .document-preview {
			display: flex;
            justify-content: center;
            align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0, 0, 0, 0.5);
			z-index: 3;

			.maskingBox {
                width: 70vw;
                height: 70vh;
                max-width: 1200px;
                max-height: 900px;
				background: #fff;
			}

            .masking_c {
                height: calc(100% - 40px);
                box-sizing: border-box;

                >div {
                    height: 100%;

                    .pdf-view{
                        height: 100%;
                        overflow: hidden;
                        overflow-y: auto;

                        >span {
                            width: 100%;
                        }

                        iframe {
                            display: block;
                        }
                    }

                    .el-pagination {
                        padding: 20px 0;
                        text-align: center;
                        height: 70px;
                        box-sizing: border-box;
                    }
                }
            }
        }

        .audio-preview {
            display: flex;
            align-items: center;
            justify-content: center;
			margin: 0;
			// background: rgba(0, 0, 0, 0.5);

            .el-dialog {
                margin: 0;
                margin-top: 0 !important;
                width: 500px;
                height: 300px;

                .el-dialog__body {
                    padding: 20px 0;
                    width: 100%;
                    height: calc(100% - 40px);
                    box-sizing: border-box;

                    div {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 40px;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
</style>


